
<template>
  <div class="monitor">
    <!-- 运行监控 -->
    <div class="monitor-nav">
      <div class="monitor-nav-tab">
        <div @click="selected=0" :class="{selected:selected==0}">综合告警</div>
        <div @click="selected=1" :class="{selected:selected==1}">辅助设备</div>
        <div @click="selected=2" :class="{selected:selected==2}">主设备</div>
        <div @click="selected=3" :class="{selected:selected==3}">在线监测</div>
        <div
          @click="selected=4"
          :class="{selected:selected==4}"
        >交直流设备</div>
        <div @click="selected=5" :class="{selected:selected==5}">控制操作</div>
      </div>
      <div class="top-back" @click="torouter"></div>
    </div>
    <div class="monitor-con">
      <!-- Composite ：综合告警 -->
      <Composite v-if="selected==0" />
      <!-- AuxiliaryLiveData ：辅助监控实时数据 -->
      <AuxiliaryLiveData v-if="selected==1" />
      <!-- MainLiveData ：主设备实时数据 -->
      <MainLiveData v-if="selected==2" />
      <OnLineMonitor v-if="selected==3" />
      <Kzcz v-if="selected==4" />
      <IntelligentControlDetil v-if="selected==5" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Composite from "./Composite.vue";
import AuxiliaryLiveData from "./AuxiliaryLiveData.vue";
import MainLiveData from "./MainLiveData.vue";
import OnLineMonitor from "./onLineMonitor.vue";
import Kzcz from "./Kzcz.vue";
import IntelligentControlDetil from "../../../IntelligentControlDetil/index.vue";
@Component({
  components: {
    Composite,
    AuxiliaryLiveData,
    MainLiveData,
    Kzcz,
    IntelligentControlDetil,
    OnLineMonitor,
  },
})
export default class monitor extends Vue {
  public selected: number = 0;
  public torouter(): void {
    this.$router.push({ path: "/homepage" });
  }
}
</script>

<style lang="scss" scoped>
.monitor {
  width: 100%;
  height: 100%;
  padding: 0.24rem;
  .monitor-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 0.42rem;
    .monitor-nav-tab {
      display: flex;
      > div {
        height: 0.42rem;
        width: 1.88rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        border: 1px solid rgba(5, 180, 255, 1);
        cursor: pointer;
        font-size: 0.2rem;
        &:hover {
          background: linear-gradient(
            360deg,
            rgba(20, 123, 252, 1) 0%,
            rgba(12, 157, 254, 1) 41%,
            rgba(3, 191, 255, 1) 100%
          );
        }
      }
      .selected {
        background: linear-gradient(
          360deg,
          rgba(20, 123, 252, 1) 0%,
          rgba(12, 157, 254, 1) 41%,
          rgba(3, 191, 255, 1) 100%
        );
      }
    }
  }
  .monitor-con {
    width: 100%;
    padding-top: 0.24rem;
    height: calc(100% - 0.48rem);
  }
}
</style>

